<template>
  <div class="gratitude-ward">
    <c-title :text="titleName"></c-title>
    <div class="member">
      <div class="avatar">
        <img :src="info.avatar" class="full" />
      </div>
      <div class="info">
        <div class="nickname">{{info.nickname}}</div>
        <span class="level" v-if="info.level">{{info.level}}</span>
      </div>
      <div class="total-box">
        <div class="text">累计奖励金额：</div>
        <div class="money">{{ $i18n.t('money') }}{{info.all || "0.00"}}</div>
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab name="first" title="奖励记录"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="list-item" v-for="(item,i) in dataList" :key="i">
        <div class="details">
          <div class="ID">ID：{{item.id}}</div>
          <div class="time">{{item.created_at}}</div>
        </div>
        <div class="money">{{ $i18n.t('money') }}{{item.amounts}}</div>
      </div>
    </div>
    <yz-blank :datas="dataList" text="暂无奖励记录"></yz-blank>
    <div style="height: 40rpx;"></div>
  </div>
</template>
<script>
  import yz_blank from "@/components/ui_components/yz_blank";
  import {scrollMixin} from "@/utils/mixin.js";
  export default{
    mixins:[scrollMixin],
    components:{"yz-blank":yz_blank},
    data(){
      return{
        info:{},
        activeName:"first",
        dataList:[],
        isLoadMore:true,
        page:1,
        titleName:"感恩奖"
      }
    },
    created(){
      this.getdata();
    },
    methods:{
      initData(){
        this.isLoadMore = false;
        this.page = 1;
        this.dataList = [];
        this.info = {};
        this.activeName = "first";
        this.titleName = "感恩奖";
      },
      setTsLoadMore(bool){
        this.isLoadMore = !bool;
      },
      getdata(){
        this.initData();
        $http.post("plugin.distribution-appreciation.frontend.controllers.center.index",{page:1},"正在加载中...").then(({result,msg,data})=>{
          if(result){
            this.info = data.info;
            this.dataList = data.list.data;
            this.titleName = data.info.plugin_name || "感恩奖";
            this.fun.setWXTitle(this.titleName);
            this.setTsLoadMore(this.page == data.list.last_page);
          }else this.$toast(msg);
        })
      },
      getMoreData(){
        if(this.isLoadMore){
          let page = this.page + 1;
          this.isLoadMore = false;
          $http.post("plugin.distribution-appreciation.frontend.controllers.center.index",{page},"正在加载中...").then(({result,msg,data})=>{
            if(result){
              this.page = page;
              this.dataList = this.dataList.concat(data.list.data);
              this.setTsLoadMore(this.page == data.list.last_page);
            }else this.$toast(msg);
          })
        }else this.$toast("没有更多数据了");
      },
    }
  }
</script>
<style scoped lang="scss">
  .gratitude-ward {
    text-align: left;
    ::v-deep .van-tabs { padding: 0 1rem; }
    ::v-deep .van-tabs__nav { border-radius: 0.4rem 0.4rem 0 0; }
    .full { width: 100%; height: 100%; }
    .money { color: #f15656; }

    .member {
      width: 100%;
      height: 7rem;
      background: #f15656;
      display: flex;
      align-items: center;
      padding: 0 1rem;
      position: relative;
      margin-bottom: 2rem;
      .avatar { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; margin: 0 1rem; }

      .info {
        color: #fff;
        line-height: 1.5rem;
        .level { padding: 0.1rem 0.4rem; background: #edab83; border-radius: 0.4rem; }
      }

      .total-box {
        width: calc(100% - 2rem);
        position: absolute;
        bottom: -1.5rem;
        height: 3rem;
        background: #fff;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        .text { color: #101010; flex: 1; }
      }
    }

    .list {
      width: calc(100% - 2rem);
      margin: 0 auto;
      background: #fff;

      .list-item {
        display: flex;
        padding: 0 1rem;
        line-height: 1.8rem;
        align-items: center;
        border-bottom: 1px solid #f9f9f9;

        .details {
          flex: 1;
          font-size: 0.875rem;
          color: #101010;
          .time { color: #867e7e; font-size: 0.75rem; }
        }
      }
    }
  }
</style>